<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<li class="dropdown" id="noticeLi">
    <a class="dropdown-toggle count-info">
        <i class="fa fa-bullhorn inoc"></i>
       	<span class="label newNotification-icon" id="notice">
       	<span class="fa fa-circle text-danger"></span>
    	</span>
    </a>
</li>
<script src="js/lib/jquery.min.js"></script>
<script>
    var userId = 2
    var ws = null;
    function liveData(nodeIds) {
        if (!ws) {
            initWebSocket(JSON.stringify({userId: nodeIds}));
        } else {
            ws.send(JSON.stringify({userId: nodeIds}));
        }
    }
    liveData(userId)
    $(document).on('click', '#newNoTip',function () {
        location.href="#/planform.html"
    })
    /**
     * 初始化WebSocket
     */
    function initWebSocket(msg) {
        if (!window.WebSocket) {
            swal("您的浏览器不支持WebSocket", "", "warning");
            return;
        }
        ws = new WebSocket("ws://192.168.3.8:8080/demoWebsocket"); //创建WebSocket对象并连上后台接口
        ws.onopen = function() {
            //连接建立时触发
            console.log("websocket正在连接...");
            console.log("msg===", msg);
            msg != undefined && ws.send(msg); //向服务器发送信息
            // heartCheck.start(ws);
        };

        ws.onmessage = function(e) {
            //客户端接收服务端数据时触发
            var receiveMes = JSON.parse(e.data);
            console.log("websocket收到：", receiveMes);
            var number = receiveMes.total; // 新消息的数量;
            var content = "";
            if (number != 0 && number != undefined) {
                if (flag == true) {
                    console.log("flag1==",flag);
                    content =
                            '<span style="font-size: 14px;cursor:pointer;" id="newNoTip">您有' +
                            number +
                            "条新公告！点此查看</span>";
                    flag = false;
                    console.log("flag2==",flag);
                } else {
                    content =
                            '<span style="font-size: 14px;cursor:pointer;" id="newNoTip">您收到一条新公告！点此查看</span>';
                }
                layui.use("upload", function() {
                    layer.ready(function() {
                        layer.open({
                            type: 4,
                            tips: [2, "#f8ac59"],
                            content: [content,"#noticeLi"],
                            area: ["220px", "40px"], //定义宽高
                            time: 8000, //定义几秒后自动关闭
                            closeBtn: 1,
                            shade: 0
                        });
                    });
                });
                //页面一打开就执行新消息提示弹层

                // heartCheck.reset(ws);
            }
            ws.onerror = function(e) {
                console.log("onError断开连接...");
                ws.onclose();
                reconnect(); //调用重新连接函数
            };
            ws.onclose = function() {
                console.log("onClose断开连接...");
                reconnect();
            };
        };
    }

    /**
     * WebSocket重连
     */
    function reconnect() {
        console.log("WebSocket正在重连...");
        initWebSocket(JSON.stringify({ userId: userId }));
    }

</script>
</body>
</html>